<div class="card">
    <span class="title">🍪 Cookie Notice</span>
    <p class="description">We use cookies to ensure that we give you the best experience on our website. <a href="#">Read cookies policies</a>. </p>
    <a class="prefs">
        Manage preferences
    </a>    
    <div class="actions">
        <button class="decline">
            Decline
        </button>
        <button class="valid">
            Accept
        </button>
    </div>
</div>
<style>
/* From Uiverse.io by NouvelleTechno - Tags: card, claymorphism, shadow */
.card {
  width: 370px;
  background: white;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  border-radius: 40px;
  background-color: hsl(120deg 20% 95%);
  box-shadow: 17px 17px 34px 0px rgb(124, 134, 124), 
    inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .title {
  color: black;
  font-size: 2rem;
  font-weight: 600;
}

.card .description {
  color: black;
  margin-top: 10px;
  margin-bottom: 20px;
}

.card .prefs {
  color: blue;
  font-size: .8em;
  margin-bottom: 20px;
}

.card .actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card button {
  color: white;
  border: none;
  background: none;
  padding: 20px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
}

.card .decline {
  color: rgb(255, 0, 0);
  box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 
    inset -8px -8px 16px 0px rgba(92, 92, 92, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .valid {
  color: rgb(0, 156, 0);
  box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 
    inset -8px -8px 16px 0px rgba(121, 121, 121, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .decline:hover {
  color: white;
  background-color: rgb(255, 0, 0);
  box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 
    inset -8px -8px 16px 0px rgba(134, 20, 20, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.card .valid:hover {
  color: white;
  background-color: rgb(0, 156, 0);
  box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 
    inset -8px -8px 16px 0px rgba(47, 134, 20, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

</style>
